<template>
  <div>
    <el-form
     
      ref="book"
      :model="book"
      label-width="80px"
      v-loading="loading"
      element-loading-text="拼命加载中"
    >
      <el-form-item label="图书封面">
        <el-image
          style="width: 100px; height: 100px"
          :src="book.photoUrl"
          :fit="fill"
        ></el-image>
      </el-form-item>
      <el-form-item label="书名">
        {{ book.name }}
      </el-form-item>
      <el-form-item label="作者"> {{ book.author }}</el-form-item>
      <el-form-item label="出版社"> {{ book.publishing }} </el-form-item>
      <el-form-item label="页数"> {{ book.pages| receiveDesc }}</el-form-item>
      
      <el-form-item label="市场价格"> ￥{{ book.price }} </el-form-item>
     <el-tooltip width=50% placement="top" effect="light">
        <div slot="content">{{ book.description}}</div>
      <el-form-item label="图书简介">
 
        {{ book.description | receiveDesc }}
         
      </el-form-item>
     </el-tooltip>
      <el-form-item label="建议分类">
        {{ book.tags| receiveDesc }}
      </el-form-item>
      <el-form-item v-if="isbn.length > 1">
        <el-button
          icon="el-icon-arrow-left"
          circle
          @click="jian"
          :disabled="this.id == 0 ? true : false"
        ></el-button>
        <el-button
     
          icon="el-icon-arrow-right"
          circle
           :disabled="this.id== this.isbn.length-1? true : false"
          @click="jia"
          
        ></el-button>
      </el-form-item>
      <el-form-item>
        <el-button style=" margin-bottom: 10px; " @click="handlePrev">上一步</el-button>
        <el-button type="primary" @click="submitForm"
          >下一步，确定编辑商品属性</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { get_book_by_isbn } from "@/api/book";
export default {
  props: {
    isbn: {
      type: Array,
      default: false,
    },
    active: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      book: {},
      id: 0,
      loading: false,
      arr: [],
    };
  },
  filters: {
    receiveDesc(value) {
      if (value === undefined || value === null || value === "") {
        return "暂无";
      } else if (value.length > 8) {
        return value.substr(0, 20) + "...";
      } else {
        return value;
      }
    },
  },
  methods: {
    jian() {
      this.id--;
    },
    jia() {
      this.id++;
    },
    submitForm() {
      console.log(this.arr);
      this.$emit("nextStep", this.arr);
    },

  async  get_book(val) {
     
    },
    handlePrev() {
      console.log("上一步");
      this.$emit("prevStep");
    },
  },

  watch: {
  async  active(val) {
      console.log("获取ISBN 图书属性");
      if (val == 1) {
        console.log(this.isbn);
        this.arr = [];

        // this.get_book(this.isbn);

         this.loading = true;
    
   for (let i = 0; i < this.isbn.length; i++)  {
        console.log(this.isbn[i]);
      await   get_book_by_isbn({
          ISBN: this.isbn[i].value,
          key: "11432.c2a9d4d616be7822a563ac99d56b31ce？.acc144f1e780c9a8b8055f0267a1de94",
        })
          .then((res) => {
            console.log(res);

            //    console.log(res);
               if(res.data.data.ret==0){
                    this.loading = false;
                     let resdata=JSON.parse(JSON.stringify(res.data.data.data));
                   this.arr.push(resdata)
                   console.log(this.arr);

               }else{
                    this.$message({
                  message: res.data.data.errmsg,
                  type: 'warning'
                });
                  this.loading = false;
               }
          })
        //   .catch((err) => {
            

        //     this.$message({
        //       message: "查询失败",
        //       type: "warning",
        //     });
        //     this.loading = false;
        //   });
      }

      this.book = this.arr[0];
      }
    },
    id(val) {
      console.log("获取ISBN 图书属性");

      console.log(val);
      console.log(this.arr);
      this.book = this.arr[val];
    },
  },

  created() {},
};
</script>

<style>

</style>
